<template>
	<view>
		<uni-nav-bar title="提交订单" left-icon="back" :border="false" background-color="transparent"
			@clickLeft="$tab.back(0)" :fixed="true" :statusBar="true" color="#FFF"></uni-nav-bar>
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/ad_top.png" class="image-1" mode=""></image>

		<view class="content px-20" v-if="orderDetail">
			<view class="round-12 bg-white py-32 px-20">
				<view class="text-32 font-800">
					{{orderDetail.title}}
				</view>
				<view class="py-20">
					<u-line color="#F3F3F3"></u-line>
				</view>
				<view class="">
					{{orderDetail.detail}}
				</view>
				<view class="flex align-center">
					<view v-for="(i, j) in demandIcon" :key="j" class="htz-image-upload-Item">
						<view class="htz-image-upload-Item-video" v-if="isVideo(i)">
							<!-- #ifndef APP-PLUS -->
							<video :disabled="false" :controls="false" :src="i">
								<view class="htz-image-upload-Item-video-fixed" @click.stop="previewVideo(i)">
								</view>
							</video>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="htz-image-upload-Item-video-fixed" @click.stop="previewVideo(i)"></view>
							<!-- #endif -->
						</view>

						<image v-else :src="i" @click.stop="imgPreview(i)">
						</image>
					</view>
				</view>
			</view>

			<view class="bg-white round-12 mt-32">
				<view class="">
					<view class="py-28 px-20 flex align-center justify-between">
						<view class=" text-gray" style="width: 300rpx;">
							商家地址
						</view>
						<input type="text" :value="orderDetail.address">
					</view>
					<u-line color="#d1d1d1"></u-line>
				</view>
				<view class="">
					<view class="py-28 px-20 flex align-center justify-between">
						<view class=" text-gray" style="width: 300rpx;">
							投放范围
						</view>
						<input type="text" :value="orderDetail.rangeInfo.name">
					</view>
					<u-line color="#d1d1d1"></u-line>
				</view>

				<view class="" >
					<view class="py-28 px-20 flex align-center justify-between">
						<view class=" text-gray" style="width: 300rpx;">
							播放次数
						</view>
						<input type="text" :value="orderDetail.packageInfo.name">
					</view>
					<u-line color="#d1d1d1"></u-line>
				</view>
				<view class="" v-if="orderDetail.productsSpu">
					<view class="py-28 px-20 flex align-center justify-between">
						<view class=" text-gray" style="width: 300rpx;">
							关联商品
						</view>
						<input type="text" :value="orderDetail.productsSpu.prodName">
					</view>
				</view>
			</view>
			<view class="mt-24 text-24">
				投放规则：
				<view class="mt-12">
					· 每次投放选择范围后会按照以自己为中心的辐射范围计算。
				</view>
				<view class="mt-12">
					· 提交后需要后台审核通过后方可支付并投放
				</view>
			</view>
		</view>

		<view class="orderInfo" v-if="orderDetail">
			<view class="py-20 px-20 flex align-center justify-between">
				<view class="flex align-center">
					<view class="">
						共计：
					</view>
					<view class="text-36" style="color: #FFB23A;">
						￥{{orderDetail.packageInfo.detail.price}}
					</view>
				</view>

				<view class="payBtn text-FFF text-center" @click="payShow = true">
					确认支付
				</view>
			</view>
			<view class="iphoneX">

			</view>
		</view>

		<u-popup :show="payShow" mode="bottom" bgColor="transparent">
			<view class="payPopup py-32 px-28 bg-white round-16" v-if="orderDetail">
				<view class="text-36 text-center font-700 relative">
					支付方式
					<u-icon name="close" color="#666666" class="image-2" @click="payShow = false"></u-icon>
				</view>
				<view class="text-24 text-gray text-center mt-24">
					支付金额
				</view>
				<view class="text-40 text-center mt-16" style="color: #E2382B;">
					￥{{orderDetail.packageInfo.detail.price}}
				</view>
				<view class="mt-32">
					<view class="box-2 flex align-center" :style="{
						borderColor:payWay == 2 ? '#0766FF' : ''
					}" @click="payWay = 2">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_zhifubao@2x.png" class="image-3" mode="">
						</image>
						<view class="fontS-32 text-gray ml-16">
							支付宝收款
						</view>
					</view>

			<!-- 		<view class="box-2 mt-32 flex align-center" style="background: #F3FFEE; border-color: #3EC800;" :style="{
						borderColor:payWay == 1 ? '#3EC800' : ''
					}" @click="payWay = 1">
						<image src="http://img.kxjb1319.com/advertising/icon_weixin@2x.png" class="image-3" mode="">
						</image>
						<view class="fontS-32 text-gray ml-16">
							微信支付
						</view>
					</view> -->

					<view class="box-2 mt-32 flex align-center" style="background: #FFFBEE;" :style="{
						borderColor:payWay == 3 ? '#F35555' : ''
					}" @click="payWay = 3">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_lebaotongzhifu.png" class="image-3" mode="">
						</image>
						<view class="fontS-32 text-gray ml-16">
							乐宝通支付
						</view>
					</view>
				</view>

				<view class="box-3 text-center text-FFF" @click="payConfirm">
					确认支付
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="passWordShow" mode="center">
			<view class="px-32 py-32 bg-white">
				<view class="mb-24 text-36 text-center">
					请输入密码
				</view>
				<u-code-input v-model="password" @finish="fruitPayment"></u-code-input>
			</view>
		</u-popup>

		<view class="preview-full" v-if="previewVideoSrc!=''">
			<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
				<view class="preview-full-close" @click="previewVideoClose"> ×
				</view>
			</video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				previewVideoSrc: "",
				demandIcon: [],
				orderDetail:null,
				
				payShow:false,
				payWay:2,
				
				passWordShow:false,
				password:''
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async fruitPayment(){
				const res = await this.$Api.advertising.advertPay({
					id:this.orderDetail.id,
					payWay:this.payWay,
					payPassword:this.password
				})
				if(res.data == 1){
					this.$modal.msg('支付成功!')
				}else{
					this.$modal.msg(res.msg)
				}
				this.$tab.back(1500)
				this.passWordShow = false
			},
			async payConfirm(){
				if(this.payWay == 3){
					this.password = ''
					this.payShow = false
					this.passWordShow = true
					return
				}
				const res = await this.$Api.advertising.advertPay({
					id:this.orderDetail.id,
					payWay:this.payWay,
				})
				console.log(res,'微信支付宝支付')
				if(this.payWay == 2){
					// 支付宝支付
					this.$pay.Alipay(res.data)
				}else{
					// 微信支付
					
				}
			},
			isVideo(item) {
				let isPass = false
				if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/i.test(item)) {
					isPass = true
				}
				return isPass
			},
			async getData() {
				const res = await this.$Api.advertising.userBackad()
				console.log(res, '用户是否已有上个广告订单')
				this.orderDetail = res.data
				this.orderDetail.packageInfo.detail = JSON.parse(this.orderDetail.packageInfo.detail)
				this.demandIcon = this.orderDetail.resource.split(',')
			},
			previewVideo(item) {
				this.previewVideoSrc = item
			},
			previewVideoClose() {
				this.previewVideoSrc = ''
			},
			imgPreview(item) {
				uni.previewImage({
					urls: [item],
				});
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	page {
		background-color: #F8F8F8;
	}

	.image-1 {
		width: 100%;
		height: 304rpx;
	}
	
	input{
		text-align: right;
	}

	.content {
		width: 100%;
		position: absolute;
		top: 184rpx;
		left: 0;

	}

	.orderInfo {
		width: 100%;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.payPopup {
		width: 710rpx;
		margin: 0 auto;

		.image-2 {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.box-2 {
			width: 654rpx;
			height: 100rpx;
			background: #F8F8F8;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(153, 153, 153, 0.16);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 2rpx solid #EEEEEE;
			padding: 10rpx 16rpx;
		}

		.image-3 {
			width: 80rpx;
			height: 80rpx;
		}

		.image-4 {
			width: 64rpx;
			height: 64rpx;
			margin: 0 10rpx;
		}

		.box-3 {
			width: 654rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FFB23A 0%, #FF5617 100%);
			border-radius: 252rpx 252rpx 252rpx 252rpx;
			margin-top: 136rpx;
			line-height: 88rpx;
		}
	}



	.payBtn {
		width: 224rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #FFB23A 0%, #FF5617 100%);
		border-radius: 252rpx 252rpx 252rpx 252rpx;
		line-height: 80rpx;
	}

	.htz-image-upload-Item {
		width: 170rpx;
		height: 170rpx;
		margin: 13rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.htz-image-upload-Item image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.htz-image-upload-Item-video {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		position: relative;

	}

	.htz-image-upload-Item-video-fixed {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		z-index: 996;

	}

	.htz-image-upload-Item video {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;

	}

	.htz-image-upload-Item-add {
		font-size: 105rpx;
		line-height: 110rpx;
		text-align: center;
	}

	.htz-image-upload-Item-del {
		background-color: #f5222d;
		font-size: 24rpx;
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		top: 0;
		right: 0;
		z-index: 997;
		color: #fff;
	}

	.htz-image-upload-Item-del-cover {
		background-color: #f5222d;
		font-size: 24rpx;
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		text-align: center;
		top: 0;
		right: 0;
		color: #fff;
		/* #ifdef APP-PLUS */
		line-height: 25rpx;
		/* #endif */
		/* #ifndef APP-PLUS */
		line-height: 35rpx;
		/* #endif */
		z-index: 997;

	}


</style>